import { Tabs } from 'antd-mobile';
import './style.css';

import { useTabs } from './useTabs';
import HomeList from './HomeList';

const Home = () => {
  const { channels } = useTabs();
  return (
    <div className="tabContainer">
      <Tabs defaultActiveKey={'0'}>
        {channels.map(item => (
          <Tabs.Tab key={item.id} title={item.name}>
            <div className='listContainer'>
              <HomeList channelId={String(item.id)} />
            </div>
          </Tabs.Tab>
        ))}
      </Tabs>
    </div>
  );
};

export default Home;